/**
 * Created by 王清腾 on 2017/9/28.
 */

Vue.component('app-modal', {
    template: '<transition name="modal">' +
    '<div class="modal-mask">' +
    '<div class="modal-wrapper"> ' +
    '<div class="modal-container">' +
    '<div class="modal-header"> <slot name="header">default header </slot> </div> ' +
    '<div class="modal-body"> <slot name="body">default body </slot></div> ' +
    '<div class="modal-footer"> ' +
    '<slot name="footer">default footer <button class="modal-default-button" @click="close">OK </button> </slot>' +
    ' </div> </div> </div> </div> ' +
    '</transition>',
    props: {

    },
    data: function () {
        return {
            show: {
                required: true,
                type: Boolean,
                twoWay: true
            },
            callback: {
                type: Function,
                default: function () {}
            },
            backdrop: {
                type: Boolean,
                default: true
            }
        }
    },
    watch: {
      show: function (val) {
          var $el = this.$el;
          var body = document.body;
          if(val){

          }
      }  
    },
    methods: {
        close: function () {
            
        }
    }

})